<template>
  <div>
    <Temp title="图层管理">
      <template v-slot:title>
        <div @click="removeLayer()">
          <Icon
            title="删除"
            name="shanchu"
            color="rgba(245, 245, 245, 1)"
            font-size="16"
          />
        </div>
      </template>
      <div class="layerManage-main">
        <div class="baseMap">
          <el-scrollbar>
            <div class="baseMap-list">
              <div
                v-for="(item, index) in mapList"
                :key="index"
                class="baseMap-list-item"
                :class="{
                  'baseMap-list-item-active':
                    currentMapIndex === index
                }"
              >
                <el-image
                  @click.native="switchMap(index)"
                  :src="
                    staticFileUrl +
                    (item.filePath !== null
                      ? item.filePath.substring(
                          item.filePath.indexOf(
                            '/upload/'
                          ) +
                            '/upload/'.length -
                            1
                        )
                      : '')
                  "
                  alt=""
                >
                  <div slot="error" class="image-slot">
                    <div></div>
                  </div>
                </el-image>
                <span class="name">{{
                  item.name || item.serviceName
                }}</span>
                <div
                  v-if="
                    item.pkid !== '-1' &&
                    currentMapIndex !== 0 &&
                    currentMapIndex === index &&
                    activeService.terrainUrl
                  "
                  class="terrain"
                  @click.stop="toggleTerrain(index)"
                >
                  <el-image
                    :src="
                      item.showTerrain
                        ? require('@/assets/img/icon_checked.png')
                        : require('@/assets/img/icon_unchecked.png')
                    "
                  />
                  <span>地形</span>
                </div>

                <div
                  v-if="item.pkid === '-1'"
                  class="color-picker"
                >
                  <el-color-picker
                    v-model="globeColor"
                    size="mini"
                    @change="colorPickerChange"
                  />
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>

        <div
          v-show="layerList.length === 0"
          class="layerManage-tip"
        >
          暂无已加载图层
        </div>

        <el-scrollbar>
          <div class="layerManage-list">
            <div
              class="layerManage-option"
              v-for="(item, index) in layerList"
              :key="item.id"
            >
              <div class="layerManage-option-t">
                <div
                  @click="
                    toggleCheck(item.id, item.show, index)
                  "
                  :class="[
                    item.show
                      ? 'layerManage-option-t-l-active'
                      : 'layerManage-option-t-l'
                  ]"
                ></div>
                <div
                  @click="centerAt(item.id)"
                  class="layerManage-option-t-c"
                >
                  <span class="layer-name">{{
                    item.title
                  }}</span>
                  <span
                    v-show="item.from === '1'"
                    class="layerManage-option-t-c-1"
                    >【现状】</span
                  >
                  <span
                    v-show="item.from === '2'"
                    class="layerManage-option-t-c-2"
                    >【规划】</span
                  >
                  <span
                    v-show="item.from === '3'"
                    class="layerManage-option-t-c-3"
                    >【BIM】</span
                  >
                </div>
                <div
                  class="layerManage-option-t-r"
                  @click="removeLayer(item.id)"
                ></div>
              </div>
              <div class="layerManage-option-b">
                <Slider
                  @change="opacityChange"
                  :index="index"
                  formatKey="不透明度"
                  :defaultValue="
                    layerList[index]['opacity']
                  "
                />
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </Temp>
  </div>
</template>

<script>
import Icon from '@/components/icon'
import Temp from '@/components/utool/components/temp'
import Slider from '@/components/slider'
import { getAction } from '@/utils/helper'
import { globalBaseMap } from '@/utils/basemap'
import New from '@/utils/new'
import { cloneDeep } from 'lodash'
import Sortable from 'sortablejs'
import { STATIC_FILE_URL } from '@/api/config.js'

const mapViewer = {}

let _sortable

export default {
  inject: ['viewerId'],
  components: {
    Icon,
    Slider,
    Temp
  },
  data() {
    return {
      currentMapIndex: 0,
      mapList: [],
      activeService: {},

      iconSize: 20,
      layerList: [],
      checkedIds: [],
      originalGlobeColor: '',
      globeColor: ''
    }
  },
  async created() {
    this.action = await getAction(this.viewerId)
    const { layerManager, toolManager } = this.action
    mapViewer[this.viewerId] =
      mapViewer[this.viewerId] || toolManager.viewer

    const currentGlobeBaseColor =
      mapViewer[
        this.viewerId
      ].scene.globe.baseColor.toCssColorString()
    this.globeColor = currentGlobeBaseColor
    this.originalGlobeColor = currentGlobeBaseColor

    globalBaseMap[this.viewerId] =
      globalBaseMap[this.viewerId] ||
      toolManager.basemapManager
    this.mapList = globalBaseMap[this.viewerId].basemapList
    this.currentMapIndex =
      globalBaseMap[this.viewerId].currentBasemapIndex
    this.activeService =
      globalBaseMap[this.viewerId].currentHistoryImagery

    New.$on('mapIndex', (data) => {
      this.activeService = data.active
    })

    layerManager.on(
      'add',
      ({ id, title, type, layer, from }) => {
        // const { dataSource, tileset } = layer
        switch (type) {
          case 'geojson':
            // eslint-disable-next-line no-case-declarations
            const entities = layer.entities.values
            this.layerList.splice(0, 0, {
              id,
              title,
              type,
              opacity:
                entities[0].polygon.material.color._value
                  .alpha,
              show: layer.show,
              from
            })
            break
          case 'mvt':
            this.layerList.splice(0, 0, {
              id,
              title,
              type,
              opacity: layer.alpha,
              show: layer.show,
              from
            })
            break
          case 'imagery':
            this.layerList.splice(0, 0, {
              id,
              title,
              type,
              opacity: layer.alpha,
              show: layer.show,
              from
            })
            break
          case 'layer':
            const found = layer.find(
              (item) =>
                item.alpha !== undefined ||
                item.style3D !== undefined
            )
            if (found) {
              if (found.alpha !== undefined) {
                this.layerList.splice(0, 0, {
                  id,
                  title,
                  type,
                  opacity: found.alpha,
                  show: found.show,
                  from
                })
              } else {
                this.layerList.splice(0, 0, {
                  id,
                  title,
                  type,
                  opacity:
                    found.style3D.fillForeColor.alpha,
                  show: found.visible,
                  from
                })
              }
            } else {
              this.layerList.splice(0, 0, {
                id,
                title,
                type,
                opacity: undefined,
                show: undefined,
                from
              })
            }
            break
          case 'tileset':
            this.layerList.splice(0, 0, {
              id,
              title,
              type,
              opacity: 1,
              show: layer.show,
              from
            })
            break
          default:
            break
        }
      }
    )
    layerManager.on('del', (id) => {
      this.layerList = this.layerList.filter(
        (item) => item.id !== id
      )
    })
    // console.log('layers', layerManager.layers)
    layerManager.layers.forEach((item) => {
      const { id, title, type, layer, from } = item
      switch (type) {
        case 'geojson':
          // eslint-disable-next-line no-case-declarations
          const entities = layer.entities.values
          this.layerList.splice(0, 0, {
            id,
            title,
            type,
            opacity:
              entities[0].polygon.material.color._value
                .alpha,
            show: layer.show,
            from
          })
          break
        case 'mvt':
          this.layerList.splice(0, 0, {
            id,
            title,
            type,
            opacity: layer.alpha,
            show: layer.show,
            from
          })
          break
        case 'imagery':
          this.layerList.splice(0, 0, {
            id,
            title,
            type,
            opacity: layer.alpha,
            show: layer.show,
            from
          })
          break
        case 'layer':
          const found = layer.find(
            (item) =>
              item.alpha !== undefined ||
              item.style3D !== undefined
          )
          if (found) {
            if (found.alpha !== undefined) {
              this.layerList.splice(0, 0, {
                id,
                title,
                type,
                opacity: found.alpha,
                show: found.show,
                from
              })
            } else {
              let flag = false
              if (item.show !== undefined) {
                flag = item.show
                // } else if (item.visible !== undefined) {
                //   flag = item.visible
              } else {
                flag = true
              }
              this.layerList.splice(0, 0, {
                id,
                title,
                type,
                opacity: found.style3D.fillForeColor.alpha,
                show: flag,
                from
              })
            }
          } else {
            this.layerList.splice(0, 0, {
              id,
              title,
              type,
              opacity: undefined,
              show: undefined,
              from
            })
          }
          break
        case 'tileset':
          this.layerList.splice(0, 0, {
            id,
            title,
            type,
            opacity: 1,
            show: layer.show,
            from
          })
          break
        default:
          break
      }
    })
    // console.log(
    //   '所有影像图层',
    //   toolManager.viewer.imageryLayers._layers
    // )
  },
  mounted() {
    console.log('layerManager/index.vue mounted')
    const _this = this
    if (!_sortable) {
      _sortable = Sortable.create(
        document.querySelector('.layerManage-list'),
        {
          onEnd({ newIndex, oldIndex }) {
            const layers = cloneDeep(
              _this.action.layerManager.layers
            )
            layers.reverse()
            console.log('layers', layers)
            if (newIndex !== oldIndex) {
              const layer = layers[oldIndex].title
              let moveLower = false
              let moveCount = 0
              if (newIndex > oldIndex) {
                moveLower = true
                moveCount = newIndex - oldIndex
              } else {
                moveLower = false
                moveCount = oldIndex - newIndex
              }
              console.log(
                `${layer}${moveLower ? '下移' : '上移'}`,
                moveCount
              )
              let retainCount = 0
              if (moveLower) {
                // 下移计算
                // 如果本身有多个影像图层，则要移动的数量需要加上自身的数量
                if (layers[oldIndex].layer) {
                  if (
                    layers[oldIndex].layer instanceof Array
                  ) {
                    // 影像和mvt图层
                    const imageryLayers = layers[
                      oldIndex
                    ].layer.filter(
                      (temp) =>
                        temp instanceof
                          Cesium.ImageryLayer ||
                        temp.imageryLayer
                    )
                    if (imageryLayers.length) {
                      retainCount +=
                        imageryLayers.length - 1
                    }
                  }
                }
                for (
                  let i = oldIndex + 1;
                  i <= newIndex;
                  i++
                ) {
                  if (layers[i].layer) {
                    if (layers[i].layer instanceof Array) {
                      retainCount += layers[i].layer.filter(
                        (temp) =>
                          temp instanceof
                            Cesium.ImageryLayer ||
                          temp.imageryLayer
                      ).length
                    } else {
                      if (
                        layers[i].layer instanceof
                          Cesium.ImageryLayer ||
                        layers[i].layer.imageryLayer
                      ) {
                        retainCount += 1
                      }
                    }
                  }
                }
                console.log('retainCount', retainCount)
                console.log(
                  '移动前scene.imageryLayers',
                  _this.action.viewer.scene.imageryLayers
                    ._layers
                )
                if (retainCount > 0) {
                  if (layers[oldIndex].layer) {
                    if (
                      layers[oldIndex].layer instanceof
                      Array
                    ) {
                      layers[oldIndex].layer
                        .filter(
                          (temp) =>
                            temp instanceof
                              Cesium.ImageryLayer ||
                            temp.imageryLayer
                        )
                        .forEach((temp) => {
                          let find
                          if (
                            temp instanceof
                            Cesium.ImageryLayer
                          ) {
                            find =
                              _this.action.viewer.scene.imageryLayers._layers.find(
                                (layer) =>
                                  layer.imageryProvider
                                    ._baseUrl ===
                                  temp.imageryProvider
                                    ._baseUrl
                              )
                          } else if (temp.imageryLayer) {
                            find =
                              _this.action.viewer.scene.imageryLayers._layers.find(
                                (layer) =>
                                  layer.imageryProvider
                                    ._url ===
                                  temp.imageryLayer
                                    .imageryProvider._url
                              )
                          }
                          if (find) {
                            console.log(
                              '找到要移动的ImageryLayer',
                              find
                            )
                            console.log(
                              '是否包含',
                              _this.action.viewer.scene.imageryLayers.contains(
                                find
                              )
                            )
                            for (
                              let i = 0;
                              i < retainCount;
                              i++
                            ) {
                              _this.action.viewer.scene.imageryLayers.lower(
                                find
                              )
                              console.log(find, '下移一次')
                              console.log(
                                '当前scene.imageryLayers',
                                _this.action.viewer.scene
                                  .imageryLayers._layers
                              )
                            }
                          }
                        })
                    } else {
                      if (
                        layers[oldIndex].layer instanceof
                          Cesium.ImageryLayer ||
                        layers[oldIndex].layer.imageryLayer
                      ) {
                        let find
                        if (
                          layers[oldIndex].layer instanceof
                          Cesium.ImageryLayer
                        ) {
                          find =
                            _this.action.viewer.scene.imageryLayers._layers.find(
                              (layer) =>
                                layer.imageryProvider
                                  ._baseUrl ===
                                layers[oldIndex].layer
                                  .imageryProvider._baseUrl
                            )
                        } else if (
                          layers[oldIndex].layer
                            .imageryLayer
                        ) {
                          find =
                            _this.action.viewer.scene.imageryLayers._layers.find(
                              (layer) =>
                                layer.imageryProvider
                                  ._url ===
                                layers[oldIndex].layer
                                  .imageryLayer
                                  .imageryProvider._url
                            )
                        }
                        if (find) {
                          console.log(
                            '找到要移动的ImageryLayer',
                            find
                          )
                          console.log(
                            '是否包含',
                            _this.action.viewer.scene.imageryLayers.contains(
                              find
                            )
                          )
                          for (
                            let i = 0;
                            i < retainCount;
                            i++
                          ) {
                            _this.action.viewer.scene.imageryLayers.lower(
                              find
                            )
                            console.log(find, '下移一次')
                            console.log(
                              '当前scene.imageryLayers',
                              _this.action.viewer.scene
                                .imageryLayers._layers
                            )
                          }
                        }
                      }
                    }
                  }
                }
              } else {
                // 上移计算
                for (
                  let i = oldIndex - 1;
                  i >= newIndex;
                  i--
                ) {
                  if (layers[i].layer) {
                    if (layers[i].layer instanceof Array) {
                      retainCount += layers[i].layer.filter(
                        (temp) =>
                          temp instanceof
                            Cesium.ImageryLayer ||
                          temp.imageryLayer
                      ).length
                    } else {
                      if (
                        layers[i].layer instanceof
                          Cesium.ImageryLayer ||
                        layers[i].layer.imageryLayer
                      ) {
                        retainCount += 1
                      }
                    }
                  }
                }
                console.log('retainCount', retainCount)
                console.log(
                  '移动前scene.imageryLayers',
                  _this.action.viewer.scene.imageryLayers
                    ._layers
                )
                if (retainCount > 0) {
                  if (layers[oldIndex].layer) {
                    if (
                      layers[oldIndex].layer instanceof
                      Array
                    ) {
                      layers[oldIndex].layer
                        .filter(
                          (temp) =>
                            temp instanceof
                              Cesium.ImageryLayer ||
                            temp.imageryLayer
                        )
                        .forEach((temp) => {
                          let find
                          if (
                            temp instanceof
                            Cesium.ImageryLayer
                          ) {
                            find =
                              _this.action.viewer.scene.imageryLayers._layers.find(
                                (layer) =>
                                  layer.imageryProvider
                                    ._baseUrl ===
                                  temp.imageryProvider
                                    ._baseUrl
                              )
                          } else if (temp.imageryLayer) {
                            find =
                              _this.action.viewer.scene.imageryLayers._layers.find(
                                (layer) =>
                                  layer.imageryProvider
                                    ._url ===
                                  temp.imageryLayer
                                    .imageryProvider._url
                              )
                          }
                          if (find) {
                            console.log(
                              '找到要移动的ImageryLayer',
                              find
                            )
                            console.log(
                              '是否包含',
                              _this.action.viewer.scene.imageryLayers.contains(
                                find
                              )
                            )
                            for (
                              let i = 0;
                              i < retainCount;
                              i++
                            ) {
                              _this.action.viewer.scene.imageryLayers.raise(
                                find
                              )
                              console.log(find, '上移一次')
                              console.log(
                                '当前scene.imageryLayers',
                                _this.action.viewer.scene
                                  .imageryLayers._layers
                              )
                            }
                          }
                        })
                    } else {
                      if (
                        layers[oldIndex].layer instanceof
                          Cesium.ImageryLayer ||
                        layers[oldIndex].layer.imageryLayer
                      ) {
                        let find
                        if (
                          layers[oldIndex].layer instanceof
                          Cesium.ImageryLayer
                        ) {
                          find =
                            _this.action.viewer.scene.imageryLayers._layers.find(
                              (layer) =>
                                layer.imageryProvider
                                  ._baseUrl ===
                                layers[oldIndex].layer
                                  .imageryProvider._baseUrl
                            )
                        } else if (
                          layers[oldIndex].layer
                            .imageryLayer
                        ) {
                          find =
                            _this.action.viewer.scene.imageryLayers._layers.find(
                              (layer) =>
                                layer.imageryProvider
                                  ._url ===
                                layers[oldIndex].layer
                                  .imageryLayer
                                  .imageryProvider._url
                            )
                        }
                        if (find) {
                          console.log(
                            '找到要移动的ImageryLayer',
                            find
                          )
                          console.log(
                            '是否包含',
                            _this.action.viewer.scene.imageryLayers.contains(
                              find
                            )
                          )
                          for (
                            let i = 0;
                            i < retainCount;
                            i++
                          ) {
                            _this.action.viewer.scene.imageryLayers.raise(
                              find
                            )
                            console.log(find, '上移一次')
                            console.log(
                              '当前scene.imageryLayers',
                              _this.action.viewer.scene
                                .imageryLayers._layers
                            )
                          }
                        }
                      }
                    }
                  }
                }
              }
              console.log(
                'viewer的layers',
                _this.action.viewer.scene.imageryLayers
                  ._layers
              )

              // 改变layerManager中的顺序
              const newOrderLayers = cloneDeep(layers)
              const temp = newOrderLayers[oldIndex]
              newOrderLayers.splice(oldIndex, 1)
              newOrderLayers.splice(newIndex, 0, temp)
              console.log('new layers', newOrderLayers)
              newOrderLayers.reverse()
              _this.action.layerManager.layers =
                newOrderLayers
            }
          }
        }
      )
    } else {
      _sortable.option('disabled', false)
    }
  },
  beforeDestroy() {
    console.log('layerManager/index.vue beforeDestroy')
    if (_sortable) {
      _sortable.option('disabled', true)
      _sortable = null
    }
  },
  methods: {
    switchMap(index) {
      if (index !== this.currentMapIndex) {
        this.mapList[
          this.currentMapIndex
        ].showTerrain = false
        mapViewer[this.viewerId].terrainProvider =
          new Cesium.EllipsoidTerrainProvider({})

        globalBaseMap[this.viewerId].switchBasemap(index)
        this.currentMapIndex = index
      }
    },
    toggleTerrain(index) {
      this.mapList[index].showTerrain =
        !this.mapList[index].showTerrain
      globalBaseMap[this.viewerId].toggleTerrain(
        this.mapList[index].showTerrain
      )
      this.$forceUpdate()
    },
    toggleCheck(id, show, index) {
      const { type, layer } =
        this.action.layerManager.get(id)
      let find
      switch (type) {
        case 'geojson':
          layer.show = !layer.show
          this.$set(this.layerList[index], 'show', !show)
          break
        case 'mvt':
          find =
            this.action.viewer.scene.imageryLayers._layers.find(
              (temp) =>
                temp.imageryProvider._url ===
                layer.imageryLayer.imageryProvider._url
            )
          if (find) {
            layer.show = !show
            find.show = !show
            this.$set(this.layerList[index], 'show', !show)
          }
          break
        case 'imagery':
          find =
            this.action.viewer.scene.imageryLayers._layers.find(
              (temp) =>
                temp.imageryProvider._baseUrl ===
                layer.imageryProvider._baseUrl
            )
          if (find) {
            layer.show = !show
            find.show = !show
            this.$set(this.layerList[index], 'show', !show)
          }
          break
        case 'layer':
          // const clickedLayer = this.layerList.find(
          //   (a) => a.id === id
          // )
          layer.forEach((layerItem) => {
            if (layerItem.show !== undefined) {
              const find =
                this.action.viewer.scene.imageryLayers._layers.find(
                  (temp) =>
                    temp.imageryProvider._baseUrl ===
                    layerItem.imageryProvider._baseUrl
                )
              if (find) {
                layerItem.show = !show
                find.show = !show
              }
            } else if (layerItem.visible !== undefined) {
              const find =
                this.action.viewer.scene.layers.layerQueue.find(
                  (temp) => temp.name === layerItem.name
                )
              if (find) {
                layerItem.visible = !show
                find.visible = !show
              }
            }
          })
          this.$set(this.layerList[index], 'show', !show)
          break
        case 'tileset':
          layer.show = !layer.show
          this.$set(this.layerList[index], 'show', !show)
          break
        default:
          break
        // layer.visible = !layer.visible
        // this.$set(this.layerList[index], 'show', !show)
      }
    },
    opacityChange(value, index) {
      const id = this.layerList[index].id
      const { type, layer } =
        this.action.layerManager.get(id)
      let find
      switch (type) {
        case 'geojson':
          // eslint-disable-next-line no-case-declarations
          const entities = layer.entities.values
          entities.forEach((entity) => {
            entity.polygon.material = new Cesium.Color(
              entities[0].polygon.material.color._value.red,
              entities[0].polygon.material.color._value.green,
              entities[0].polygon.material.color._value.blue,
              value
            )
          })
          break
        case 'mvt':
          find =
            this.action.viewer.scene.imageryLayers._layers.find(
              (temp) =>
                temp.imageryProvider._url ===
                layer.imageryLayer.imageryProvider._url
            )
          if (find) {
            layer.alpha = value
            find.alpha = value
          }
          break
        case 'imagery':
          find =
            this.action.viewer.scene.imageryLayers._layers.find(
              (temp) =>
                temp.imageryProvider._baseUrl ===
                layer.imageryProvider._baseUrl
            )
          if (find) {
            layer.alpha = value
            find.alpha = value
          }
          break
        case 'layer':
          layer.forEach((item) => {
            if (item.alpha !== undefined) {
              const find =
                this.action.viewer.scene.imageryLayers._layers.find(
                  (temp) =>
                    temp.imageryProvider._baseUrl ===
                    item.imageryProvider._baseUrl
                )
              if (find) {
                item.alpha = value
                find.alpha = value
              }
            } else if (item.style3D) {
              const find =
                this.action.viewer.scene.layers.layerQueue.find(
                  (temp) => temp.name === item.name
                )
              if (find) {
                item.style3D.fillForeColor.alpha =
                  item.originFillForeColorAlpha * value
                find.style3D.fillForeColor.alpha =
                  find.originFillForeColorAlpha * value
              }
            }
          })
          break
        case 'tileset':
          layer.style = new Cesium.Cesium3DTileStyle({
            color: `color('#FFFFFF', ${value})`
          })
          break
        default:
          break
      }
      this.$set(this.layerList[index], 'opacity', value)
    },
    removeLayer(id) {
      this.$bus.$emit('changePropertiesTableData')
      if (id) {
        const data = this.action.layerManager._layers.find(
          (item) => item.id === id
        )
        // if (data.from == '3') {
        // if (data.serviceType === '27') {
        // bim图层删除回调
        this.$bus.$emit(
          'handleBimDel',
          id,
          data.serviceType
        )
        // }
      } else {
        // this.$bus.$emit('handleBimDel')
        this.action.layerManager._layers.forEach(
          (value, key) => {
            console.log('key', key)
            console.log('value', value)
            this.$bus.$emit(
              'handleBimDel',
              key,
              value.serviceType
            )
          }
        )
      }
      this.action.layerManager.del(id)
    },
    async centerAt(id) {
      const { viewer } = await getAction(this.viewerId)
      const { type, layer } =
        this.action.layerManager.get(id)
      switch (type) {
        case 'geojson':
          viewer.flyTo(layer)
          break
        case 'mvt':
          const bounds = layer.rectangle
          viewer.scene.camera.setView({
            destination: Cesium.Cartesian3.fromRadians(
              (bounds.east + bounds.west) * 0.5,
              (bounds.north + bounds.south) * 0.5,
              10000
            )
          })
          break
        case 'imagery':
          viewer.flyTo(layer)
          break
        case 'layer':
          // viewer.camera.flyTo({
          //   destination: Cesium.Cartesian3.fromDegrees(layer.lon, layer.lat, 1000)
          // })
          viewer.flyTo(layer[0])
          break
        case 'tileset':
          viewer.flyTo(layer)
          break
        default:
          break
      }
    },
    colorPickerChange(color) {
      if (color) {
        mapViewer[this.viewerId].scene.globe.baseColor =
          Cesium.Color.fromCssColorString(color)
        this.originalGlobeColor = color
      } else {
        this.$message.warning('颜色不能为空')
        this.globeColor = this.originalGlobeColor
      }
    }
  },
  watch: {
    layerList: {
      handler(newVal, oldVal) {
        // const newImageryVal = newVal.filter(
        //   (item) => item.type === 'imagery'
        // )
        // const oldImageryVal = oldVal.filter(
        //   (item) => item.type === 'imagery'
        // )
        // if (newImageryVal.length === oldImageryVal.length) {
        //   const originLayers =
        //     this.action.layerManager.originLayers
        //   const newLayers = new Map()
        //   // 图层列表顺序与ImageryCollection顺序相反，故需reverse获取正确顺序
        //   const temp = [...newVal]
        //   temp.reverse().forEach((item) => {
        //     newLayers.set(
        //       item.id,
        //       originLayers.get(item.id)
        //     )
        //   })
        //   // this.action.layerManager.layers = newLayers
        //
        //   // 数量相同，为排序
        //   if (
        //     newImageryVal.every(
        //       (item, index) =>
        //         item.id === oldImageryVal[index].id
        //     )
        //   ) {
        //     // 如果顺序不变，则跳过
        //     return
        //   }
        //   // 包含底图的layers
        //   const currentLayers =
        //     mapViewer[this.viewerId].scene.imageryLayers
        //       ._layers
        //   // 当前加载服务的layers
        //   const loadedLayers = currentLayers.slice(
        //     currentLayers.length - newImageryVal.length
        //   )
        //   const oldLoadedLayersMap = new Map()
        //   oldImageryVal.forEach((item, index) => {
        //     oldLoadedLayersMap.set(
        //       item.id,
        //       loadedLayers[index]
        //     )
        //   })
        //   const newSortedLayersList = []
        //   newImageryVal.forEach((item) => {
        //     newSortedLayersList.push(
        //       oldLoadedLayersMap.get(item.id)
        //     )
        //   })
        //   currentLayers.splice(
        //     currentLayers.length - newImageryVal.length,
        //     newImageryVal.length,
        //     ...newSortedLayersList
        //   )
        //   mapViewer[this.viewerId].scene.requestRender()
        // }
      }
    }
  },
  computed: {
    staticFileUrl() {
      return STATIC_FILE_URL
    }
  }
}
</script>

<style lang="scss" scoped>
.layerManage {
  &-tip {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    color: #fefefe;
  }

  &-main {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: rgba(25, 59, 81, 1);
    border-radius: 0 0 8px 8px;
    div::-webkit-scrollbar {
      border-radius: 10px;
      background-color: rgba(
        $color: #fff,
        $alpha: 0.1
      ) !important;
      width: 0 !important;
    }

    .baseMap {
      //min-width: 200px;
      width: 200px;
      padding: 12px;
      //display: grid;
      //grid-template-columns: repeat(3, auto);
      //column-gap: 10px;
      //row-gap: 10px;
      background-color: #193b51;
      border-radius: 0 0 8px 8px;
      overflow: hidden;
      ::v-deep {
        .el-scrollbar {
          width: 100%;
          height: 80px;

          &__wrap {
            overflow-x: hidden;
          }

          &__view {
          }
        }
      }

      &-list {
        display: flex;

        //&-item + &-item {
        //  margin-left: 10px;
        //}

        &-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          position: relative;

          &:not(:last-of-type) {
            margin-right: 10px;
          }

          & > .el-image {
            width: 70px;
            height: 50px;

            ::v-deep {
              .image-slot {
                width: 100%;
                height: 100%;

                & > div {
                  width: 100%;
                  height: 100%;
                  background-color: gray;
                }
              }
            }
          }

          .name {
            margin-top: 4px;
            font-size: 12px;
            color: #fff;
            text-align: center;
          }

          .terrain {
            position: absolute;
            right: 0;
            top: 50px;
            transform: translateY(-100%);
            display: flex;
            align-items: center;
            background-color: rgba(49, 49, 49, 0.5);
            padding: 2px 4px;

            .el-image {
              width: 16px;
              height: 16px;
            }

            span {
              font-size: 12px;
              color: white;
            }
          }

          .color-picker {
            position: absolute;
            right: 0;
            top: 54px;
            transform: translateY(-100%);
          }

          &-active {
            .name {
              color: rgb(0, 210, 255);
            }
          }
        }
      }

      &-list-item + &-list-item {
        margin-left: 10px;
      }
    }
  }

  ::v-deep {
    .el-scrollbar {
      width: 100%;

      &__wrap {
        overflow-x: hidden;
      }

      &__view {
      }
    }
  }

  &-list {
    width: 100%;
    max-height: 500px;
  }

  &-option {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.2);

    &-t {
      width: 100%;
      display: flex;
      align-items: center;

      &-l {
        cursor: pointer;
        width: 12px;
        height: 12px;
        background: rgba(255, 255, 255, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.3);

        &-active {
          cursor: pointer;
          position: relative;
          width: 12px;
          height: 12px;
          background-color: rgba(0, 186, 255, 1);

          &::after {
            box-sizing: content-box;
            content: '';
            border: 1px solid #fff;
            border-left: 0;
            border-top: 0;
            height: 7px;
            left: 4px;
            position: absolute;
            top: 1px;
            width: 3px;
            transform: rotate(45deg) scaleY(1);
          }
        }
      }

      &-c {
        cursor: pointer;
        flex: 1;
        overflow: hidden;
        margin: 0 10px;
        word-break: break-all;
        font-size: 14px;
        display: flex;
        align-items: center;

        .layer-name {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &-1 {
          font-size: 12px;
          font-weight: 400;
          color: #00eaff;
        }

        &-2 {
          font-size: 12px;
          font-weight: 400;
          color: #ffcc00;
        }

        &-3 {
          font-size: 12px;
          font-weight: 400;
          color: #00ff84;
        }
      }

      &-r {
        cursor: pointer;
        width: 16px;
        height: 16px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        position: relative;

        &::after,
        &::before {
          content: '';
          width: 50%;
          height: 1px;
          position: absolute;
          top: 50%;
          left: 50%;
          background-color: rgba(242, 140, 140, 1);
        }

        &::before {
          transform: translateX(-50%) translateY(-50%)
            rotateZ(45deg);
        }

        &::after {
          transform: translateX(-50%) translateY(-50%)
            rotateZ(-45deg);
        }
      }
    }

    &-b {
      margin-top: 10px;
      width: 100%;
    }
  }
}
</style>
